﻿<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<script type="text/javascript" src="js/PIE_IE678.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="css/H-ui.css"/>
<link type="text/css" rel="stylesheet" href="css/H-ui.admin.css"/>
<link type="text/css" rel="stylesheet" href="font/font-awesome.min.css"/>
<!--[if IE 7]>
<link href="font/font-awesome-ie7.min.css" rel="stylesheet" type="text/css" />
<![endif]-->

<script src="js/jquery.min.1.8.1.js"></script>
<script src="js/echarts.min.js"></script>
<!-- <script src="js/welcome.js"></script> -->

<title>我的桌面</title>
</head>
<body>
<div class="pd-20" style="padding-top:20px;">
  <p class="f-20 text-success">欢迎使用鸵鸟 <span class="f-14">V1.0</span>后台！</p>
  <p>登录次数：18 </p>
  <p>上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55</p>
  <table class="table table-border table-bordered table-bg">
    <thead>
      <tr>
        <th colspan="7" scope="col">信息统计</th>
      </tr>
      <tr class="text-c">
        <th>统计</th>
        <th>资讯库</th>
        <th>图片库</th>
        <th>产品库</th>
        <th>用户</th>
        <th>管理员</th>
      </tr>
    </thead>
    <tbody>
      <tr class="text-c">
        <td>总数</td>
        <td>92</td>
        <td>9</td>
        <td>0</td>
        <td>8</td>
        <td>20</td>
      </tr>
      <tr class="text-c">
        <td>今日</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr class="text-c">
        <td>昨日</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr class="text-c">
        <td>本周</td>
        <td>2</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr class="text-c">
        <td>本月</td>
        <td>2</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
  <table class="table table-border table-bordered table-bg mt-20">
    <thead>
      <tr>
        <th colspan="2" scope="col">服务器信息</th>
      </tr>
    </thead>
    <tbody id="echarts" style="width: 600px;height:400px;">
    <script src="js/welcome.js"></script>
    <!-- <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts'));
    var file = 0,mem = 0,swap = 0,cpu = 0;

    // 指定图表的配置项和数据
    var option = {
    	backgroundColor: '#1b1b1b',
    	/* tooltip : {
    	formatter: "{a} <br/>{c} {b}"
    	}, */
    	toolbox: {
    		show : true,
    		feature : {
    		mark : {show: false},
    		restore : {show: false},
    		saveAsImage : {show: true}//保存图片功能
    		}
    	}, 
    	series : [
    		{
    		name:'CPU',
    		type:'gauge',
    		min:0,//从0开始
    		max:100,//100结束
    		splitNumber:10,//等份
    		radius: '90%',
    		axisLine: {		// 坐标轴线
    			lineStyle: {	// 属性lineStyle控制线条样式
    			color: [[0.1, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],//表盘区间颜色
    			width: 3,
    			shadowColor : '#fff',//默认透明
    			shadowBlur: 10
    			}
    		},
    		axisLabel: {		// 坐标轴小标记
    			textStyle: {	// 属性lineStyle控制线条样式
    			fontWeight: 'bolder',
    			color: '#fff',
    			shadowColor : '#fff', //默认透明
    			shadowBlur: 10
    			}
    		},
    		axisTick: {		// 坐标轴小标记
    			length :15,	// 属性length控制线长
    			lineStyle: {	// 属性lineStyle控制线条样式
    			color: 'auto',
    			shadowColor : '#fff', //默认透明
    			shadowBlur: 10
    			}
    		},
    		splitLine: {	   // 分隔线
    			length :25,	// 属性length控制线长
    			lineStyle: {	// 属性lineStyle（详见lineStyle）控制线条样式
    			width:3,
    			color: '#fff',
    			shadowColor : '#fff',//默认透明
    			shadowBlur: 10
    			}
    		},
    		pointer: {	// 分隔线
    			shadowColor : '#fff',//默认透明
    			shadowBlur: 5
    		},
    		title : {
    			textStyle: {	// 其余属性默认使用全局文本样式，详见TEXTSTYLE
    			fontWeight: 'bolder',
    			fontSize: 20,
    			fontStyle: 'italic',
    			color: '#fff',
    			shadowColor : '#fff',//默认透明
    			shadowBlur: 10
    			}
    		},
    		detail : {
    			backgroundColor: 'rgba(30,144,255,0.8)',
    			borderWidth: 1,
    			borderColor: '#fff',
    			shadowColor : '#fff', //默认透明
    			shadowBlur: 5,
    			offsetCenter: [0, '50%'],	// x, y，单位px
    			textStyle: {	   // 其余属性默认使用全局文本样式，详见TEXTSTYLE
    			fontWeight: 'bolder',
    			color: '#fff'
    			}
    		},
    		data:[{value: 0, name: 'CPU'}]//后台传过来的参数
    		},
    		{
    		name:'内存',
    		type:'gauge',
    		center : ['15%', '55%'],	// 默认全局居中
    		radius : '60%',
    		min:0,
    		max:100,
    		endAngle:45,
    		splitNumber:10,
    		axisLine: {		// 坐标轴线
    			lineStyle: {	// 属性lineStyle控制线条样式
    			color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
    			width: 2,
    			shadowColor : '#fff', //默认透明
    			shadowBlur: 10
    			}
    		},
    		axisLabel: {	// 坐标轴小标记
    			textStyle: {	// 属性lineStyle控制线条样式
    			fontWeight: 'bolder',
    			color: '#fff',
    			shadowColor : '#fff', //默认透明
    			shadowBlur: 10
    			}
    		},
    		axisTick: {		// 坐标轴小标记
    			length :12,	// 属性length控制线长
    			lineStyle: {	// 属性lineStyle控制线条样式
    			color: 'auto',
    			shadowColor : '#fff', //默认透明
    			shadowBlur: 10
    			}
    		},
    		splitLine: {	// 分隔线
    			length :20,	// 属性length控制线长
    			lineStyle: {	// 属性lineStyle（详见lineStyle）控制线条样式
    			width:3,
    			color: '#fff',
    			shadowColor : '#fff', //默认透明
    			shadowBlur: 10
    			}
    		},
    		pointer: {
    			width:5,
    			shadowColor : '#fff', //默认透明
    			shadowBlur: 5
    		},
    		title : {
    			offsetCenter: [0, '-30%'],	// x, y，单位px
    			textStyle: {	// 其余属性默认使用全局文本样式，详见TEXTSTYLE
    			fontWeight: 'bolder',
    			fontStyle: 'italic',
    			color: '#fff',
    			shadowColor : '#fff',//默认透明
    			shadowBlur: 10
    			}
    		},
    		detail : {
    			//backgroundColor: 'rgba(30,144,255,0.8)',
    			// borderWidth: 1,
    			borderColor: '#fff',
    			shadowColor : '#fff',//默认透明
    			shadowBlur: 5,
    			width: 80,
    			height:30,
    			
    			offsetCenter: [25, '20%'],	// x, y，单位px
    				textStyle: {	// 其余属性默认使用全局文本样式，详见TEXTSTYLE
    				fontWeight: 'bolder',
    				color: '#fff'
    				}
    			},
    			data:[{value: 0, name: 'memory'}]
    			},
    			{
    			name:'磁盘空间',
    			type:'gauge',
    			center : ['75%', '50%'],	// 默认全局居中
    			radius : '60%',
    			min:0,
    			max:100,
    			startAngle:135,
    			endAngle:45,
    			splitNumber:2,
    			axisLine: {		// 坐标轴线
    				lineStyle: {	// 属性lineStyle控制线条样式
    				color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
    				width: 2,
    				shadowColor : '#fff', //默认透明
    				shadowBlur: 10
    				}
    			},
    			axisTick: {		// 坐标轴小标记
    				length :12,	// 属性length控制线长
    				lineStyle: {	// 属性lineStyle控制线条样式
    				color: 'auto',
    				shadowColor : '#fff',//默认透明
    				shadowBlur: 10
    				}
    			},
    			axisLabel: {
    				textStyle: {	// 属性lineStyle控制线条样式
    				fontWeight: 'bolder',
    				color: '#fff',
    				shadowColor : '#fff',//默认透明
    				shadowBlur: 10
    				},
    				formatter:function(v){
    				switch (v + '') {
    					case '0' : return 'used';
    					case '50' : return 'file';
    					case '100' : return 'total';
    				}
    				}
    			},
    			splitLine: {	// 分隔线
    				length :15,	// 属性length控制线长
    				lineStyle: {	// 属性lineStyle（详见lineStyle）控制线条样式
    				width:3,
    				color: '#fff',
    				shadowColor : '#fff', //默认透明
    				shadowBlur: 10
    				}
    			},
    			pointer: {
    				width:2,
    				shadowColor : '#fff', //默认透明
    				shadowBlur: 5
    			},
    			title : {
    				show: false
    			},
    			detail : {
    				show: false
    			},
    			data:[{value: 0, name: 'file'}]
    			},
    			{
    			name:'可用空间',
    			type:'gauge',
    			center : ['75%', '50%'],	// 默认全局居中
    			radius : '60%',
    			min:0,
    			max:100,
    			startAngle:315,
    			endAngle:225,
    			splitNumber:2,
    			axisLine: {		// 坐标轴线
    				lineStyle: {	// 属性lineStyle控制线条样式
    				color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
    				width: 2,
    				shadowColor : '#fff',//默认透明
    				shadowBlur: 10
    				}
    			},
    			axisTick: {		// 坐标轴小标记
    				show: false
    			},
    			axisLabel: {
    				textStyle: {	// 属性lineStyle控制线条样式
    				fontWeight: 'bolder',
    				color: '#fff',
    				shadowColor : '#fff',//默认透明
    				shadowBlur: 10
    				},
    				formatter:function(v){
    				switch (v + '') {
    					case '0' : return 'used';
    					case '50' : return 'swap';
    					case '100' : return 'total';
    				}
    				}
    			},
    			splitLine: {	// 分隔线
    				length :15,	// 属性length控制线长
    				lineStyle: {	// 属性lineStyle（详见lineStyle）控制线条样式
    				width:3,
    				color: '#fff',
    				shadowColor : '#fff',//默认透明
    				shadowBlur: 10
    				}
    			},
    			pointer: {
    				width:2,
    				shadowColor : '#fff',//默认透明
    				shadowBlur: 5
    			},
    			title : {
    				show: false
    			},
    			detail : {
    				show: false
    			},
    			data:[{value: 0, name: 'swap'}]
    			}
    		]
    		};

    	function SystomInformation(){
    		$.post("getSystomInformation",function(data){
    		if(data.RESULTCODE=="SUCCESS"){
    			
    			option.series[0].data[0].value = data.RESULTDATA.cpu;
    			option.series[1].data[0].value = data.RESULTDATA.mem;
    			option.series[2].data[0].value = data.RESULTDATA.file;
    			option.series[3].data[0].value = data.RESULTDATA.swap;
    			
    		}else{
    			
    			option.series[0].data[0].value = 0;
    			option.series[1].data[0].value = 0;
    			option.series[2].data[0].value = 0;
    			option.series[3].data[0].value = 0;
    		}
    		
    		// 使用刚指定的配置项和数据显示图表。
    		myChart.setOption(option);
    		});
    	}
    	
    	setInterval(SystomInformation, 3000);
    	setTimeout(SystomInformation, 0);
    </script> -->
    </tbody>
  </table>
</div>
<footer>
  <p>感谢jQuery、layer、Validform、UEditor、My97DatePicker、Font Awesome、Datatables、jquery.fileupload、Lightbox插件<br>Copyright &copy;2015 H-ui.admin v2.1.1 All Rights Reserved.<br>
    本后台系统由H-ui前端框架提供前端技术支持</p>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>

</body>
</html>